<template>
  <div>
    <!-- v-model 将文本框的 value 属性和数据变量双向绑定 -->
    <!-- 注意事项: v-model 暂时只用在表单元素上 -->
   用户名： <input v-model="user" type="text"><br><br>
   密码： <input v-model="password" type="text"><br><br>
   性别：<input v-model="gender" type="radio" name="gender" value="nan">男
         <input v-model="gender" type="radio" name="gender" value="nv">女
         <br>
         <br>
         <br>
     <!-- 复选框: 特点 -->
    <!-- 1. 双向绑定的数据是数组 -->
    <!--    会将勾选的复选框 value 值添加到数组中 -->
    <!-- 2. 双向绑定的数据是非数组(隐式转换为 boolean) -->
    <!--    会将勾选状态同步给数据变量 -->
    <!-- 结论: 如果绑定的是数组, 其实绑定的就是 value 属性, 如果绑定的是非数组, 则绑定的是 checked 属性 -->
  爱好：<input v-model="hobby" type="checkbox" value="eat">吃饭
        <input v-model="hobby" type="checkbox" value="sleep">睡觉
        <input v-model="hobby" type="checkbox" value="doudou">打豆豆
        <br>
        <br>
        <br>
  所在地：<select v-model="dizhi">
              <option value="ez">鄂州</option>
              <option value="wh">武汉</option>
              <option value="hs">黄石</option>
              <option value="xg">孝感</option>
          </select>
          <br>
          <br>
          <br>
  具体地址：<textarea v-model="jutidizhi"></textarea>
  </div>
</template>

<script>
export default {
  data (){
    return {
      user:'大魔王',
      password:123456,
      gender:'nan',
      hobby:['eat'],
      dizhi:'ez',
      jutidizhi:'地球啊啊啊'
    }
  }
}
</script>